<!-- /*
 * @Author: RDSunday 
 * @Date: 2020-03-21 16:49:27 
 * @Last Modified by:   RDSunday 
 * @Last Modified time: 2020-03-21 16:49:27 
 */ -->
<!-- 选项卡幻灯片效果 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

        }
        /* 选项卡按钮 */
        .tablink {
            background-color: #555;
            color: white;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            font-size: 18px;
            width: 25%;

        }
        /* 选项卡按钮鼠标划过颜色 */
        .tablink:hover {
            background-color: #777;
        }
        .tabcontent {
            color: white;
            /* display: none; */
            padding: 50px;
            text-align: center;
        }
        #London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}
    </style>
</head>
<body>
    <p>点击各个选项切换内容：</p>
    <div id="London" class="tabcontent">
        <h3>London</h3>
        <p>London is the capital city of England</p>
    </div>
    <div id="Paris" class="tabcontent">
        <h3>Paris</h3>
        <p>Paris is the capital city of France</p>
    </div>
    <div id="Tokyo" class="tabcontent">
        <h3>Tokyo</h3>
        <p>Tokyo is the capital city of Japan</p>
    </div>
    <div id="Oslo" class="tabcontent">
        <h3>Oslo</h3>
        <p>Oslo is the capital city of Norway</p>
    </div>
    <button class="tablink" onclick="openCity('London',this,'red')" id="defaultOpen">London</button>
    <button class="tablink" onclick="openCity('Paris',this,'green')">Paris</button>
    <button class="tablink" onclick="openCity('Tokyo',this,'blue')">Tokyo</button>
    <button class="tablink" onclick="openCity('Oslo',this,'orange')">Oslo</button>
    <script>
        function openCity(cityName,elmnt,color) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0;i < tabcontent.length;i ++) {
                // 把所有内容块都隐藏
                tabcontent[i].style.display = "none";

            }
            tablinks = document.getElementsByClassName("tablink");
            for (i=0;i < tablinks.length; i++) {
                tablinks[i].style.backgroundColor = "";
            }
            // 点击那个按钮传过去cityname显示那个内容块
            document.getElementById(cityName).style.display = "block";
            elmnt.style.backgroundColor=color;
        }
        //触发id ="defaultOpen"click事件
        document.getElementById("defaultOpen").click();
    </script>
</body>
</html>